import React, { useState } from 'react';
import { Modal, Table, Space, message, Button, Form, Input, } from 'antd';
import { request } from 'umi';
var myData = await request('http://203.195.246.58:8888/index/category/findAll', {});
const Demo = () => {
  const onFinish = (values) => {
    console.log(JSON.stringify(values));
    request('http://203.195.246.58:8888/category/saveOrUpdate', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': ' eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNVEF5Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2MzQ4NjYxMjgsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjM1MDM4OTI4LCJuYmYiOjE2MzQ4NjYxMjh9.eVoKckqPly3I2PuPVxR-REeol3EIfVcqhgn7hv0mLzw'
      },
      params: values,
    }).then(() => {
      request('http://203.195.246.58:8888/index/category/findAll', {}).then((res) => {
        myData = res
      });
    });
  };
  const onFinishFailed = (errorInfo) => {
    console.log('表单校验失败:', errorInfo);
  };
  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="名称"
        name="name"
        rules={[
          {
            required: true,
            message: '请输入栏目名称!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="No"
        name="no"
        rules={[
          {
            required: true,
            message: '请输入栏目No!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
const LoginModal = () => {
  const onFinish = (user) => {
    // 登录
    request('http://203.195.246.58:8888/user/login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      data: JSON.stringify(user),
    }).then((res) => {
      console.log(res);
      message.success(res.message);
    })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('表单校验失败:', errorInfo);
  };
  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form >
  );
};
const App = () => {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: text => <a>{text}</a>,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'No',
      dataIndex: 'no',
      key: 'no',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => showModal(record)}>编辑</a>
          <a onClick={() => del(record.id)}>删除</a>
        </Space>
      ),
    },
  ];
  function del (id) {
    request('http://203.195.246.58:8888/category/deleteById?id=' + id, {
      headers: {
        'Authorization': ' eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNVEF5Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2MzQ4NjYxMjgsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjM1MDM4OTI4LCJuYmYiOjE2MzQ4NjYxMjh9.eVoKckqPly3I2PuPVxR-REeol3EIfVcqhgn7hv0mLzw'
      },
    }).then((res) => {
      message.error(res.message);
      request('http://203.195.246.58:8888/index/category/findAll', {}).then((res) => {
        console.log(res);
        myData = res
      });
    })
  }
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isLoginModalVisible, setIsLoginModalVisible] = useState(false);
  const showModal = (record) => {
    setIsModalVisible(true);
    if (record.id) {
      console.log("编辑");
      console.log(record);
    } else {
      console.log('新增');
    }
  };
  const showLoginModal = (record) => {
    setIsLoginModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
    setIsLoginModalVisible(false);

  };
  const handleCancel = () => {
    setIsModalVisible(false);
    setIsLoginModalVisible(false);
  };
  return (
    <>
      <Button type="primary" onClick={showLoginModal}>
        登录
      </Button>
      <Button type="primary" onClick={showModal}>
        新增
      </Button>
      <Modal title="栏目" footer={null} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Demo />
      </Modal>
      <Modal title="登录" footer={null} visible={isLoginModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <LoginModal />
      </Modal>
      <Table columns={columns} dataSource={myData.data} />
    </>
  );
};
export default App